<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="jumbotron">
      <h1>欢迎光临 NZ2002 SHOP</h1>
      <div class="login">
        <form class="form-horizontal">
          <div class="form-group">
            <label for="username" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input name="name" type="text" class="form-control" id="username" placeholder="用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input name="pwd" type="password" class="form-control" id="password" placeholder="密码">
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default">登录</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <script src="../tools/jquery.min.js"></script>
    <script src="../js/myAjax.js"></script>
    <script src="../js/cookie.js"></script>

    <script>
      $('button').click(function(){
        // 发送 ajax请求 方式是 post 携带参数 userName userPwd
        const xhr = myPromiseJQueryAjax('../server/goods_login.php' , 'post' , { userName: $('[name="name"]').val() , userPwd:  $('[name="pwd"]').val() } , 'json');
        xhr.then(function(res){
          // 根据结果 动态渲染生成页面
          if( res.result === 1 ){
            // 登录成功

            // 设定cookie信息
            // 0 表示 没有登录 1 表示 登录
            // 其他 页面可以通过 cookie 的 login 数据 判断 是不是已经登录了
            mySetCookie( 'login' , 1 , 7*24*60*60 , '/' );

            // 跳转页面
            if(window.confirm('您登录成功,点击确定跳转来时候的页面')){
              window.location.href = `${window.location.search.substr(5)}`;
            }
            
            


          }else if( res.result === 0 ){
            // 登录失败
            window.alert('您的账号密码有误,请您检查后,重新登录');
          }
        })

      });

    </script>

    <script>


    </script>

    <script>
      /*
        点击 登录 按钮 获取 数据 向 后端程序发送请求
          请求方式是 post 携带两个参数
          键名是 userName userPwd

        form表单中 button按钮等 默认的效果是 submit提交效果
          不执行默认提交 解决方法有2种
            方法1: 将 button标签 的属性 从 submit 修改为 button 
                   效果是 普通按钮 点击没有任何操作 可以直接绑定点击事件

            方法2: 可以通过 阻止默认事件 来 阻止页面跳转

      
      
      */
    </script>
</body>
</html>
